<!-- views/Register.vue -->
<template>
  <div>
    <!-- 标题栏 -->
    <mt-header title="用户注册">
      <mt-button icon="back" slot="left"></mt-button>
      <router-link to="/denglu" slot="right">登录</router-link>
    </mt-header>
    <!-- 表单组件 -->
    <mt-field
      type="text"
      label="用户名"
      v-model="name"
      :state="nameState"
      placeholder="请输入用户名"
      @blur.native.capture="checkName"
    />
    <mt-field
      type="password"
      label="密码"
      v-model="password"
      :state="pwdState"
      placeholder="请输入密码"
      @blur.native.capture="checkPwd"
    />
    <mt-field
      type="password"
      label="确认密码"
      v-model="repwd"
      :state="repwdState"
      placeholder="请再次输入密码"
      @blur.native.capture="checkRepwd"
    />
    <mt-button type="primary" size="large" @click="checkForm">
      快速注册
    </mt-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "", // 双向数据绑定 用户名输入框
      nameState: "", // 处理用户名输入框的状态的动态更新
      password: "",
      pwdState: "",
      repwd: "",
      repwdState: "",
    };
  },
  methods: {
    checkName() {
      //处理点击按钮验证表单
      //单词字符大于6位小于16位
      let reg = /^[a-zA-Z0-9]{6,15}$/;
      if (reg.test(this.name)) {
        this.nameState = "success";
        return true;
      } else {
        this.nameState = "error";
        return false;
      }
    },
    // 验证密码
    checkPwd() {
      let reg = /^\d{6}$/;
      if (reg.test(this.password)) {
        // 验证成功
        this.pwdState = "success";
        return true;
      } else {
        // 验证失败
        this.pwdState = "error";
        return false;
      }
    },

    // 验证重复密码  6位数字的同时还要满足：与密码内容一致
    checkRepwd() {
      let reg = /^\d{6}$/;
      if (reg.test(this.password) && this.repwd == this.password) {
        this.repwdState = "success";
        return true;
      } else {
        this.repwdState = "error";
        return false;
      }
    },
    checkForm() {
      //发送注册请求  post
      this.axios
        .post("/username", `username=${this.name}&password=${this.password}`)
        .then((result) => {
          // console.log(result);
          if(result.data.code==1){
            alert("注册成功");
            this.$router.push("/denglu");
          }else{
            alert('注册失败')
          }
        });
    },
  },
};
</script>




